{% extends "tutorial.html" %}
{% load mixin from templatefilters %}

{% block pagebreadcrumb %}{{ tut.title }}{% endblock %}

{% block head %}

<style>
.clip1 {
  height: 426px;
}

.clip1 > img {
  position: absolute;
  left: 40px;
  clip: rect(20px, 528px, 366px, 40px);
}

#mask-links ul {
        list-style-type: none;
        width: 240px;
        padding: 0;
} 

#mask-links li {
        border: 1px dotted #999;
        border-width: 1px 0;
        padding: 15px 0;
        margin: 0;
}

#mask-links {
  width: 255px;
  height: 300px;
  overflow-x: hidden;
  overflow-y: scroll;
  -webkit-clip-path: polygon(0 0, 20px 20px, 40px 0, 60px 20px, 80px 0, 100px 20px, 120px 0, 140px 20px, 160px 0, 180px 20px, 200px 0, 220px 20px, 240px 0, 255px 0, 255px 300px, 240px 300px, 220px 280px, 200px 300px, 180px 280px, 160px 300px, 140px 280px, 120px 300px, 100px 280px, 80px 300px, 60px 280px, 40px 300px, 20px 280px, 0 300px);
  clip-path: url(#clipping4);
}

#mask-links li:nth-child(even) {
  background: #CCC
}

#mask-links li:nth-child(odd) {
  background: #AAA
}

#mask-links > ul:first-child {
  margin-top: 20px;
}

#mask-links > ul:last-child {
  margin-bottom: 20px;
}

.clip-animation {
  clip-path: url(#clipping5);
  -webkit-clip-path: polygon(100% 50%,84.70057014808336% 54.5684167277018%,91.0518476172854% 60.99980941685713%,82.33578363789503% 63.39392013277814%,93.30127018922194% 75%,77.76736691019323% 71.30665001530522%,80.05203820042827% 80.05203820042827%,71.30665001530522% 77.76736691019323%,75% 93.30127018922192%,63.39392013277814% 82.33578363789503%,60.99980941685714% 91.0518476172854%,54.56841672770181% 84.70057014808336%,50% 100%,45.4315832722982% 84.70057014808336%,39.000190583142874% 91.0518476172854%,36.606079867221865% 82.33578363789505%,25.00000000000001% 93.30127018922194%,28.693349984694787% 77.76736691019323%,19.947961799571733% 80.05203820042827%,22.23263308980677% 71.30665001530522%,6.698729810778076% 75.00000000000001%,17.664216362104966% 63.39392013277815%,8.948152382714603% 60.99980941685715%,15.299429851916635% 54.568416727701816%,0% 50.00000000000001%,15.299429851916635% 45.431583272298205%,8.94815238271459% 39.00019058314288%,17.66421636210496% 36.60607986722188%,6.698729810778062% 25.000000000000014%,22.23263308980676% 28.693349984694787%,19.947961799571715% 19.947961799571747%,28.69334998469477% 22.232633089806775%,24.99999999999998% 6.698729810778083%,36.60607986722184% 17.664216362104973%,39.00019058314284% 8.948152382714603%,45.43158327229816% 15.299429851916642%,49.99999999999999% 0%,54.568416727701795% 15.299429851916635%,60.99980941685711% 8.94815238271459%,63.39392013277812% 17.66421636210496%,74.99999999999997% 6.6987298107780475%,71.3066500153052% 22.23263308980675%,80.05203820042826% 19.947961799571722%,77.76736691019323% 28.69334998469477%,93.30127018922192% 24.99999999999998%,82.33578363789502% 36.60607986722184%,91.0518476172854% 39.00019058314283%,84.70057014808336% 45.43158327229816%);
}

.clip-animation:hover {
  -webkit-animation: "clip" 1s infinite;
}

@-webkit-keyframes "clip" {
  0% {
    -webkit-clip-path: polygon(100% 50%,84.70057014808336% 54.5684167277018%,91.0518476172854% 60.99980941685713%,82.33578363789503% 63.39392013277814%,93.30127018922194% 75%,77.76736691019323% 71.30665001530522%,80.05203820042827% 80.05203820042827%,71.30665001530522% 77.76736691019323%,75% 93.30127018922192%,63.39392013277814% 82.33578363789503%,60.99980941685714% 91.0518476172854%,54.56841672770181% 84.70057014808336%,50% 100%,45.4315832722982% 84.70057014808336%,39.000190583142874% 91.0518476172854%,36.606079867221865% 82.33578363789505%,25.00000000000001% 93.30127018922194%,28.693349984694787% 77.76736691019323%,19.947961799571733% 80.05203820042827%,22.23263308980677% 71.30665001530522%,6.698729810778076% 75.00000000000001%,17.664216362104966% 63.39392013277815%,8.948152382714603% 60.99980941685715%,15.299429851916635% 54.568416727701816%,0% 50.00000000000001%,15.299429851916635% 45.431583272298205%,8.94815238271459% 39.00019058314288%,17.66421636210496% 36.60607986722188%,6.698729810778062% 25.000000000000014%,22.23263308980676% 28.693349984694787%,19.947961799571715% 19.947961799571747%,28.69334998469477% 22.232633089806775%,24.99999999999998% 6.698729810778083%,36.60607986722184% 17.664216362104973%,39.00019058314284% 8.948152382714603%,45.43158327229816% 15.299429851916642%,49.99999999999999% 0%,54.568416727701795% 15.299429851916635%,60.99980941685711% 8.94815238271459%,63.39392013277812% 17.66421636210496%,74.99999999999997% 6.6987298107780475%,71.3066500153052% 22.23263308980675%,80.05203820042826% 19.947961799571722%,77.76736691019323% 28.69334998469477%,93.30127018922192% 24.99999999999998%,82.33578363789502% 36.60607986722184%,91.0518476172854% 39.00019058314283%,84.70057014808336% 45.43158327229816%);
  }
  50% {
    -webkit-clip-path: polygon(84.70057014808336% 54.5684167277018%,91.0518476172854% 60.99980941685713%,82.33578363789503% 63.39392013277814%,93.30127018922194% 75%,77.76736691019323% 71.30665001530522%,80.05203820042827% 80.05203820042827%,71.30665001530522% 77.76736691019323%,75% 93.30127018922192%,63.39392013277814% 82.33578363789503%,60.99980941685714% 91.0518476172854%,54.56841672770181% 84.70057014808336%,50% 100%,45.4315832722982% 84.70057014808336%,39.000190583142874% 91.0518476172854%,36.606079867221865% 82.33578363789505%,25.00000000000001% 93.30127018922194%,28.693349984694787% 77.76736691019323%,19.947961799571733% 80.05203820042827%,22.23263308980677% 71.30665001530522%,6.698729810778076% 75.00000000000001%,17.664216362104966% 63.39392013277815%,8.948152382714603% 60.99980941685715%,15.299429851916635% 54.568416727701816%,0% 50.00000000000001%,15.299429851916635% 45.431583272298205%,8.94815238271459% 39.00019058314288%,17.66421636210496% 36.60607986722188%,6.698729810778062% 25.000000000000014%,22.23263308980676% 28.693349984694787%,19.947961799571715% 19.947961799571747%,28.69334998469477% 22.232633089806775%,24.99999999999998% 6.698729810778083%,36.60607986722184% 17.664216362104973%,39.00019058314284% 8.948152382714603%,45.43158327229816% 15.299429851916642%,49.99999999999999% 0%,54.568416727701795% 15.299429851916635%,60.99980941685711% 8.94815238271459%,63.39392013277812% 17.66421636210496%,74.99999999999997% 6.6987298107780475%,71.3066500153052% 22.23263308980675%,80.05203820042826% 19.947961799571722%,77.76736691019323% 28.69334998469477%,93.30127018922192% 24.99999999999998%,82.33578363789502% 36.60607986722184%,91.0518476172854% 39.00019058314283%,84.70057014808336% 45.43158327229816%,100% 50%);
  }
  100% {
    -webkit-clip-path: polygon(91.0518476172854% 60.99980941685713%,82.33578363789503% 63.39392013277814%,93.30127018922194% 75%,77.76736691019323% 71.30665001530522%,80.05203820042827% 80.05203820042827%,71.30665001530522% 77.76736691019323%,75% 93.30127018922192%,63.39392013277814% 82.33578363789503%,60.99980941685714% 91.0518476172854%,54.56841672770181% 84.70057014808336%,50% 100%,45.4315832722982% 84.70057014808336%,39.000190583142874% 91.0518476172854%,36.606079867221865% 82.33578363789505%,25.00000000000001% 93.30127018922194%,28.693349984694787% 77.76736691019323%,19.947961799571733% 80.05203820042827%,22.23263308980677% 71.30665001530522%,6.698729810778076% 75.00000000000001%,17.664216362104966% 63.39392013277815%,8.948152382714603% 60.99980941685715%,15.299429851916635% 54.568416727701816%,0% 50.00000000000001%,15.299429851916635% 45.431583272298205%,8.94815238271459% 39.00019058314288%,17.66421636210496% 36.60607986722188%,6.698729810778062% 25.000000000000014%,22.23263308980676% 28.693349984694787%,19.947961799571715% 19.947961799571747%,28.69334998469477% 22.232633089806775%,24.99999999999998% 6.698729810778083%,36.60607986722184% 17.664216362104973%,39.00019058314284% 8.948152382714603%,45.43158327229816% 15.299429851916642%,49.99999999999999% 0%,54.568416727701795% 15.299429851916635%,60.99980941685711% 8.94815238271459%,63.39392013277812% 17.66421636210496%,74.99999999999997% 6.6987298107780475%,71.3066500153052% 22.23263308980675%,80.05203820042826% 19.947961799571722%,77.76736691019323% 28.69334998469477%,93.30127018922192% 24.99999999999998%,82.33578363789502% 36.60607986722184%,91.0518476172854% 39.00019058314283%,84.70057014808336% 45.43158327229816%,100% 50%,84.70057014808336% 54.5684167277018%);
  }
}
</style>

{% endblock %}

{% block html5badge %}
<img src="/static/images/identity/html5-badge-h-css3-graphics.png" width="165" height="64" alt="This article is powered by HTML5 CSS3 / Styling, and Graphics Effects" title="This article is powered by HTML5 CSS3 / Styling, and Graphics Effects" />
{% endblock %}

{% block content %}

<p>Due operazioni spesso utilizzate nella computer grafica sono il
  ritaglio (clipping) e il mascheramento (masking). Entrambe
  nascondono porzioni visuali di un elemento. Se hai già lavorato
  con <a href="http://www.w3.org/TR/SVG/masking.html">SVG</a>
  o con <a href="http://www.w3.org/TR/2dcontext/">i Canvas HTML</a>
  prima d'ora, molto probabilmente queste pratiche non ti sono nuove.
  Il ritaglio stabilisce quale sia la regione visibile di un elemento. Tutto
  quello che si trova al di fuori questa regione non viene renderizzato
  - viene "ritagliato". L'operazione di mascheramento consiste nella
  combinazione tra una immagine, la maschera, e un contenuto, che
  subisce una variazione del canale alfa. Alcune parti di un elemento
  mascherato possono diventare parzialmente o completamente
  trasparenti. La nuova
  specifica <a href="http://dvcs.w3.org/hg/FXTF/raw-file/tip/masking/index.html">
  Masking CSS</a> mira a introdurre queste due operazioni nel mondo dell'HTML.</p>

<h2 id="toc-clipping-in-css-21">Il ritaglio in CSS 2.1</h2>

<p>In <a href="http://www.w3.org/TR/2004/CR-CSS21-20040225/visufx.html#clipping">CSS
    2.1</a> era già specificata la proprietà <code>clip</code>. Questa
    è tuttavia limitata a ritagli rettangolari tramite la
    funzione <code>rect()</code>, la quale riceve in ingresso quattro
    argomenti per le distanze degli spigoli superiore, inferiore,
    destro e sinistro. La parte fastidiosa: la
    proprietà <code>clip</code> si applica solo a elementi con
    posizione assoluta, mentre viene ignorata per gli altri elementi.</p>

<p>CSS:</p>

<pre class="prettyprint"><code>img {
  position: absolute;
  clip: rect(10px, 290px, 190px, 10px);
}
</code></pre>

<p>HTML:</p>

<pre class="prettyprint"><code>&lt;img src="image.jpg" width="568"&gt;
</code></pre>

<p>
  <figure>
    <img src="clip1a.png" alt="original unclipped image" />
    <div class="clip1"><img src="clip1a.png" alt="'clip' property applied to an image" /></div>
  </figure>
</p>

<p>Anche per gli elementi in SVG la proprietà <code>clip</code> è
  limitata. Questo è uno dei motivi per cui la specifica SVG ha
  aggiunto la proprietà <code>clip-path</code> che attualmente è stata adattata
  dal CSS Masking.</p>

<h2 id="toc-clip-path-property">La proprietà clip-path</h2>

<p>la proprietà <code>clip-path</code> può essere applicata a tutti
  gli elementi HTML, agli elementi grafici SVG e agli elementi
  contenitori contenitori di SVG. Tale proprietà può fare riferimento
  sia all'elemento <code>&lt;clipPath&gt;</code> che ad una delle
  forme base introdotte
  con  <a href="http://dev.w3.org/csswg/css3-exclusions">CSS Exclusions</a>.</p>

<p>L'elemento <code>&lt;clipPath&gt;</code> prende qualsiasi oggetto
  grafico da SVG e lo utilizza come regione di ritaglio. Gli elementi
  grafici in SVG
  sono <code>&lt;rect&gt;</code>, <code>&lt;circle&gt;</code>, <code>&lt;ellipse&gt;</code>, <code>&lt;path&gt;</code>, <code>&lt;polygon&gt;</code>, <code>&lt;image&gt;</code>
  e <code>&lt;text&gt;</code>. <code>&lt;clipPath&gt;</code> consente
  inoltre di combinare più elementi grafici. In tal caso, viene
  utilizzata come regione di ritaglio l'unione di tutte le forme.
  L'esempio che segue mostra come usare <code>&lt;clipPath&gt;</code>:</p>

<p>CSS:</p>

<pre class="prettyprint"><code>img {
  clip-path: url(#clipping);
}
</code></pre>

<p>HTML:</p>

<pre class="prettyprint"><code>&lt;svg&gt;
  &lt;defs&gt;
    &lt;clipPath id="clipping"&gt;
      &lt;circle cx="284" cy="213" r="213" /&gt;
    &lt;/clipPath&gt;
  &lt;/defs&gt;
&lt;/svg&gt;

&lt;img src="image.jpg" width="568"&gt;
</code></pre>

<p><code>clip-path</code> può essere valorizzato anche con delle forme
  base, che non richiedono alcun markup SVG associato. Il loro
  scopo all'interno di <code>clip-path</code> è quello di fornire
  delle funzioni scorciatoia per le operazioni di ritaglio basilari.</p>

<ul>
<li><code>rectangle(&lt;top&gt;, &lt;left&gt;, &lt;width&gt;,
    &lt;height&gt;, &lt;rx&gt;, &lt;ry&gt;)</code> definisce un
    rettangolo, in maniera simile alla funzione <code>rect()</code> di
    <code>clip</code>, e aggiunge due parametri opzionali per
    i <a href="http://www.folklore.org/StoryView.py?story=Round_Rects_Are_Everywhere.txt">bordi arrotondati</a>.</li>
<li><code>circle(&lt;cx&gt;, &lt;cy&gt;, &lt;r&gt;)</code> definisce
  una semplice circonferenza con un centro e un raggio.</li>
<li><code>ellipse(&lt;cx&gt;, &lt;cy&gt;, &lt;rx&gt;,
    &lt;ry&gt;)</code> definisce un'ellisse con un centro e due raggi,
    uno verticale e uno orizzontale.</li>
<li><code>polygon(&lt;x1&gt; &lt;y1&gt;, &lt;x2&gt; &lt;y2&gt;, ...,
    &lt;xn&gt; &lt;yn&gt;)</code> definisce un poligono in base alla
    lista di punti fornita.</li>
</ul>

<p>Il markup del CSS ha quindi l'aspetto dell'esempio che segue:</p>

<pre class="prettyprint"><code>img {
  clip-path: polygon(0px 208px, 146.5px 207px, 147px 141.2px, ...);
}
</code></pre>

<p>Il ritaglio può essere molto utile per la presentazione di
  contenuti visuali. Nell'esempio che segue sono applicati diversi
  ritagli ad un'immagine.</p>

<p><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 800 1750">
  <image xlink:href="humayun-thom-arno.jpg" width="568" height="426" clip-path="url(#clip1)" transform="translate(50, 5)"/>
  <image xlink:href="humayun-thom-arno.jpg" width="568" height="426" clip-path="url(#clip2)" transform="translate(50, 436)"/>
  <image xlink:href="humayun-thom-arno.jpg" width="568" height="426" clip-path="url(#clip3)" transform="translate(50, 867)"/>
  <image xlink:href="humayun-thom-arno.jpg" width="568" height="426" clip-path="url(#clip4)" transform="translate(50, 1298)"/>
</svg></p>

<p>Il ritaglio può servire anche per il design di interfacce.
  Nell'esempio che segue una lisca di pesce indica una lista in prosecuzione.</p>

<div id="mask-links">
<ul>
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
<li>List Item 4</li>
<li>List Item 5</li>
<li>List Item 6</li>
<li>List Item 7</li>
<li>List Item 8</li>
<li>List Item 9</li>
<ul>
</div>

<p>Se si scrolla la lista si può osservare l'effetto risultante.</p>

<p>Si deve considerare che <code>clip-path</code>, così
  come <code>clip</code>, taglia fuori ogni aspetto di un elemento,
  compreso lo sfondo, i bordi e eventuali scrollbar.</p>

<h2 id="toc-animation-of-clip-path">Animazione di clip-path</h2>

<p>Sia le forme base che il contenuto di un
  elemento <code>&lt;mask&gt;</code> possono essere animati. Il
  prossimo esempio ha un'animazione a forma di stella:</p>

<p><img src="humayun-thom-arno.jpg" alt="Animation of clipping" class="clip-animation"/></p>

<p>Ecco il codice sorgente per l'animazione di una forma base:</p>

<pre class="prettyprint"><code>img:hover {
  clip-path: polygon(0px 208px, 146.5px 207px, 147px 141.2px, ...);
  animate: star 3s;
}

@keyframes star {
  0% {
    clip-path: polygon(0px 208px, 146.5px 207px, 147px 141.2px, ...);
  },
  100% {
    clip-path: polygon(0px 208px, 146.5px 207px, 147px 141.2px, ...);
  }
}
</code></pre>

<h2 id="toc-masking">Mascheramento</h2>

<p>La seconda operazione oltre al ritaglio è il mascheramento.
  Un'immagine maschera viene utilizzata come una sorta di "maglia
  colorata" per filtrare le aree visuali di un elemento. Nei paragrafi
  successivi spiegherò le differenze tra due tipi di maschera: la
  maschera di luminanza e la maschera alfa.</p>

<h3 id="toc-luminance-mask">Maschera di Luminanza</h3>

<p>Utilizzando le maschere di luminanza, l'immagine maschera è
  inizialmente trasformata in un'immagine rasterizzata in scala di
  grigi (se non è già in scala di grigi). Tanto più "chiara" è la
  porzione di un'immagine maschera, tanto più visibile sarà l'elemento
  mascherato in quella stessa porzione. Ad esempio, per un elemento il nero indica
  trasparenza completa, il bianco opacità completa e il grigio trasparenza parziale.</p>

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="578" height="213">
  <image x="5" y="0" xlink:href="humayun-thom-arno.jpg" width="284" height="213"/>
  <rect x="295" y="1" width="282" height="211" fill="black" stroke="black"/>
  <ellipse cx="441" cy="101.5" rx="113.6" ry="85.2" fill="white" filter="url(#filter2)"/>
</svg>

<h3 id="toc-alpha-mask">Maschera Alfa</h3>

<p>Le maschere alfa usano lo stesso principio delle maschere di
  luminanza. Differenza rispetto al mascheramento di luminanza: qui
  conta solo il canale alfa dell'immagine. Tanto meno opaca è una
  porzione dell'immagine maschera, tanto meno visibile sarà l'elemento
  in quella stessa porzione.</p>

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="578" height="213">
  <image x="5" y="0" xlink:href="humayun-thom-arno.jpg" width="284" height="213"/>
  <rect x="295" y="1" width="282" height="211" fill="none" stroke="black"/>
  <ellipse cx="441" cy="101.5" rx="113.6" ry="85.2" fill="black" filter="url(#filter2)"/>
</svg>

<p>In sintesi: entrambi i metodi di mascheramento modificano il
  livello di trasparenza di un elemento. L'immagine qui sotto è il
  risultato di entrambe le operazioni descritte sopra.</p>

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="568" height="426">
    <mask id="mask1">
      <ellipse cx="50%" cy="50%" rx="40%" ry="40%" fill="white" filter="url(#filter2)"/>
    </mask>
  <image xlink:href="humayun-thom-arno.jpg" width="568" height="426" mask="url(#mask1)"/>
</svg>

<p>La specifica CSS per il mascheramento definisce due proprietà
  scorciatoie: <code>mask</code> e <code>mask-box-image</code>.</p>

<h2 id="toc-the-mask-property">La proprietà mask</h2>

<p>La proprietà <code>mask</code> combina il mascheramento di
  un'immagine con tutti i riferimenti alla maschera come segue.</p>

<p>Il primo modo è utilizzare le
  proprietà <code>mask-image</code>, <code>mask-repeat</code>, <code>mask-position</code>, <code>mask-clip</code>, <code>mask-origin</code>
  e <code>mask-size</code>, specificate in maniera simile alla loro
  controparte <code>background</code>
  con <code>background-image</code>. Così come
  per <code>background-image</code>, è possibile definire diverse
  sorgenti per le immagini maschera. Ogni sorgente di una maschera è
  un'immagine definita dalla
  specifica <a href="http://www.w3.org/TR/css3-images/">CSS3
  Images</a>. Tutte le sorgenti di maschera vengono combinate per
  formare una singola immagine maschera. Questa immagine viene usata
  per mascherare l'elemento e il suo contenuto, come descritto in
  precedenza. Valori possibili per le immagini sono tutti i formati
  immagine rasterizzati come JPG o PNG, elementi SVG o elementi
  predefiniti come i gradienti CSS.</p>

<p>Il primo esempio di mascheramento mostrato sopra può essere
  realizzato in maniera semplice tramite il codice che segue:</p>

<pre class="prettyprint"><code>img {
  mask-image: url(mask.svg);
}
</code></pre>

<p>Se la sorgente della maschera dovesse essere estesa alla dimensione
  del suo contenuto, basta usare la proprietà
  scorciatoia <code>mask</code>, così come si farebbe per il
  background con la proprietà scorciatoia <code>background</code>:</p>

<pre class="prettyprint"><code>img {
  mask: url(mask.svg) top left / cover;
}
</code></pre>

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="578" height="213">
  <image x="5" y="0" xlink:href="humayun-thom-arno.jpg" width="284" height="213"/>
  <rect x="368" y="50" width="142" height="106.5" fill="none" stroke="black"/>
  <ellipse cx="441" cy="101.5" rx="56.8" ry="42.6" fill="black" filter="url(#filter2)"/>
</svg>

<p>Il secondo modo fa riferimento a un
  elemento <code>&lt;mask&gt;</code> come definito
  da <a href="http://www.w3.org/TR/SVG/masking.html">SVG 1.1</a>. Un
  elemento <code>&lt;mask&gt;</code> può ricevere qualsiasi elemento
  grafico, così come elementi SVG raggruppati, e lo utilizza per
  creare l'immagine maschera.</p>

<p>CSS:</p>

<pre class="prettyprint"><code>img {
  mask: url(#masking);
}
</code></pre>

<p>HTML:</p>

<pre class="prettyprint"><code>&lt;svg&gt;
  &lt;defs&gt;
    &lt;linearGradient id="gradient" x1="0" y1="00%" x2 ="0" y2="100%"&gt;
      &lt;stop stop-color="black" offset="0"/&gt;
      &lt;stop stop-color="white" offset="1"/&gt;
    &lt;/linearGradient&gt;

    &lt;mask id="masking" maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox"&gt;
      &lt;rect y="0.3" width="1" height=".7" fill="url(#gradient)" /&gt;
      &lt;circle cx=".5" cy=".5" r=".35" fill="white" /&gt;
    &lt;/mask&gt;
  &lt;/defs&gt;
&lt;/svg&gt;

&lt;img src="image.jpg" width="568"&gt;
</code></pre>

<p>Questo avrà l'aspetto della seguente immagine:</p>

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="568" height="426">
  <image xlink:href="humayun-thom-arno.jpg" width="500" height="350" mask="url(#masking2)"/>
</svg>

<h2 id="toc-the-mask-box-image-property">La proprietà mask-box-image</h2>

<p> La proprietà <code>mask-box-image</code> consente di dividere
  un'immagine maschera in 9 tasselli: quattro angoli, quattro spigoli
  e il tassello centrale. Questi tasselli possono essere divisi
  ulteriormente, scalati e ridimensionati in diversi modi per
  rientrare nella dimensione dell'area dell'immagine maschera. La
  proprietà prende in prestito questa funzionalità
  da <code>border-image</code> e consente un mascheramento notevole su
  spigoli e angoli del contenuto. L'esempio che segue illustra il
  comportamento di tale proprietà:</p>

<pre class="prettyprint"><code>img {
  mask-box-image: url("stamp.svg") 35 repeat;
}
</code></pre>

<p>Come maschera è usata la seguente immagine, suddivisa inoltre in 9 parti:</p>

<p><img src="stampTiles.svg" alt="Pattern of a stamp to be used as mask" /></p>

<p>Queste parti sono utilizzate per mascherare angoli e spigoli del
  contenuto, e il risultato è mostrato qui di seguito:</p>

<p><img src="humayun-thom-arno.jpg" style="-webkit-mask-box-image: url(stampTiles.svg) 35 repeat;" alt="Image masked with mask-box-image" /></p>

<h2 id="toc-browser-support">Supporto del browser</h2>

<p>La tematica del supporto nei diversi browsers rappresenta sempre un
  aspetto di sfida. In questo caso anche il rilevamento delle
  funzionalità (o feature detection) può essere piuttosto confuso.</p>

<p>Tutti i browser supportano <code>clip</code> come specificato.
  Tutti i browser supportano le proprietà <code>mask</code>
  e <code>clip-path</code> come specificato
  in <a href="http://www.w3.org/TR/SVG/masking.html">SVG 1.1</a> per
  gli elementi SVG. Comunque solo un browser consente di applicare
  queste proprietà agli elementi HTML: Firefox (più o meno). Vediamo
  qualche dettaglio.</p>

<p>Le proprietà <code>clip-path</code> e <code>mask</code>, con
  riferimento agli elementi <code>&lt;clipPath&gt;</code>
  e <code>&lt;mask&gt;</code> funzionano in Firefox nativamente;
  entrambe le proprietà sono prive di prefisso. D'altro
  canto, <code>mask-image</code>, <code>mask-box-image</code> e
  proprietà correlate non sono per niente supportate. Nemmeno le forme base
  per il ritaglio sono supportate.</p>

<p>I browser basati su WebKit, come Safari e Chrome, hanno il supporto
  per <code>mask-image</code>, <code>mask-box-image</code> e le
  proprietà correlate. Tutte queste sono con prefisso e possono essere
  applicate solo a elementi HTML. Le versioni nightly di entrambi i
  browser supportano <code>-webkit-clip-path</code> quando valorizzato
  con forme base o con un riferimento all'interno dell'HTML.</p>

<p>Se vuoi provare il ritaglio e il mascheramento, assicurati di usare
  le proprietà con prefisso e senza prefisso. Quelle senza prefisso
  devono essere valorizzate con un riferimento a <code>&lt;mask&gt;</code> o <code>&lt;clipPath&gt;</code>.

<pre class="prettyprint"><code>&lt;style&gt;
  #image {
    mask: url(#mask);
    -webkit-mask: url(mask.svg) top left / cover;
    -o-mask: url(mask.svg) top left / cover;
    -ms-mask: url(mask.svg) top left / cover;
  }
&lt;/style&gt;

&lt;img id="image" src="coolImage.jpg" width="400"&gt;

&lt;svg width="0" height="0"&gt;
  &lt;mask id="mask"&gt;
    ...
  &lt;/mask&gt;
&lt;/svg&gt;
</code></pre>

<p>Presta attenzione, gli altri browser non hanno ancora nessun
  supporto a funzionalità di mascheramento o di ritaglio quando
  applicate ad elementi HTML.</p>

<h2 id="toc-acknowledgment">Riconoscimenti</h2>

<p>Davvero molte grazie a Arno Gourdol per aver fornito l'immagine da <a href="http://en.wikipedia.org/wiki/Humayun's_Tomb">Humayun's Tomb</a>.</p>
<svg width="0" height="0">
  <defs>
    <clipPath id="clip1">
        <path
       d="M 0 207.918 L 146.463 206.956 L 146.967 141.224 L 150.742 141.056 L 150.574 149.037 L 158.387 146.659 L 158.098 136.73 L 161.464 136.609 L 161.705 146.659 L 172.668 146.538 L 172.668 131.921 L 176.995 132.209 L 176.659 146.659 L 184.088 147.068 L 183.968 141.729 L 180.434 137.402 L 185.459 134.661 L 188.872 128.145 L 200.076 120.501 L 211.302 126.439 L 216.615 140.216 L 213.323 141.513 L 213.323 146.538 L 225.657 146.081 L 225.2 137.402 L 227.41 137.113 L 228.277 147.982 L 232.052 149.279 L 231.595 141.513 L 230.681 137.402 L 230.681 124.155 L 235.249 112.735 L 244.385 100.858 L 256.719 91.2658 L 269.966 85.3274 L 275.904 83.5003 L 273.163 78.4755 L 274.702 72.7999 L 276.865 63.2333 L 279.558 70.71 L 279.485 75.6614 L 280.015 84.4873 L 292.806 88.9818 L 304.346 96.6266 L 312.327 103.983 L 319.804 113.817 L 323.868 128.266 L 325.238 137.402 L 322.954 141.513 L 322.954 146.538 L 326.152 145.168 L 326.152 135.118 L 330.263 134.661 L 329.806 146.538 L 342.596 146.538 L 342.596 141.056 L 335.744 140.143 L 341.683 130.55 L 346.251 123.241 L 354.93 117.76 L 364.979 125.069 L 367.72 134.204 L 374.572 136.488 L 371.831 141.97 L 373.201 145.624 L 378.226 145.624 L 378.226 139.229 L 375.942 135.118 L 380.053 130.093 L 381.881 136.488 L 381.881 145.624 L 392.387 146.081 L 392.387 140.6 L 394.671 135.575 L 396.498 141.97 L 396.041 146.995 L 404.095 149.494 L 403.35 139.639 L 406.642 139.35 L 407.004 205.921 L 434.412 205.921 L 437.609 192.217 L 446.745 193.588 L 449.029 204.094 L 567.555 205.008 L 567.796 425.491 L 0.288769 425.659 Z"/>
    </clipPath>
    <clipPath id="clip2">
       <path
       d="M 14.8492 10.0868 L 80.6102 35.5426 L 125.865 6.55125 L 152.028 36.9568 L 199.404 8.67257 L 255.973 41.9066 L 305.47 3.72283 L 362.039 36.2497 L 386.787 8.67257 L 454.67 44.0279 L 477.297 9.37968 L 502.753 27.7645 L 555.079 7.96547 L 565.685 32.0071 L 530.33 98.4751 L 567.1 153.629 L 523.259 190.399 L 563.564 254.039 L 528.916 280.909 L 567.1 352.326 L 543.058 418.087 L 501.339 388.389 L 441.235 423.037 L 414.365 391.217 L 325.976 420.916 L 272.236 393.339 L 248.902 420.916 L 178.898 389.803 L 108.894 420.209 L 65.7609 392.632 L 35.3553 420.916 L 0.707107 391.217 L 24.7487 318.385 L 2.82843 266.767 L 29.6985 245.553 L 1.41421 191.813 L 29.6985 123.224 L 3.53553 82.2117 L 26.8701 46.8563 Z"/>
    </clipPath>
    <clipPath id="clip3">
       <rect width="568" height="426" rx="85.2" ry="85.2"/>
    </clipPath>
    <clipPath id="clip4">
        <ellipse cx="284" cy="213" rx="284" ry="213"/>
    </clipPath>
    <filter id="filter2">
      <feGaussianBlur stdDeviation="10"/>
    </filter>
    <filter id="filter">
      <feGaussianBlur stdDeviation="0.03"/>
    </filter>
    <filter id="filter2">
      <feGaussianBlur stdDeviation="5"/>
    </filter>
    <linearGradient id="gradient" x1="0" y1="00%" x2 ="0" y2="100%">
      <stop stop-color="black" offset="0"/>
      <stop stop-color="white" offset="1"/>
    </linearGradient>
    <mask id="masking2" maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox">
      <rect y="0.3" width="1" height=".7" fill="url(#gradient)" />
      <circle cx=".5" cy=".5" r=".35" fill="white" />
    </mask>
    <clipPath id="clipping4">
      <polygon points="0 0, 20 20, 40 0, 60 20, 80 0, 100 20, 120 0, 140 20, 160 0, 180 20, 200 0, 220 20, 240 0, 255 0, 255 300, 240 300, 220 280, 200 300, 180 280, 160 300, 140 280, 120 300, 100 280, 80 300, 60 280, 40 300, 20 280, 0 300"/>
    </clipPath>
    <clipPath id="clipping5" clipPathUnits="objectBoundingBox">
      <polygon points="1.00 .50,.8470057014808336 .545684167277018,.910518476172854 .6099980941685713,.8233578363789503 .6339392013277814,.9330127018922194 .75,.7776736691019323 .7130665001530522,.8005203820042827 .8005203820042827,.7130665001530522 .7776736691019323,.75 .9330127018922192,.6339392013277814 .8233578363789503,.6099980941685714 .910518476172854,.5456841672770181 .8470057014808336,.50 1.00,.454315832722982 .8470057014808336,.39000190583142874 .910518476172854,.36606079867221865 .8233578363789505,.2500000000000001 .9330127018922194,.28693349984694787 .7776736691019323,.19947961799571733 .8005203820042827,.2223263308980677 .7130665001530522,.06698729810778076 .7500000000000001,.17664216362104966 .6339392013277815,.08948152382714603 .6099980941685715,.15299429851916635 .54568416727701816,0 .5000000000000001,.15299429851916635 .45431583272298205,.0894815238271459 .3900019058314288,.1766421636210496 .3660607986722188,.06698729810778062 .25000000000000014,.2223263308980676 .28693349984694787,.19947961799571715 .19947961799571747,.2869334998469477 .22232633089806775,.2499999999999998 .06698729810778083,.3660607986722184 .17664216362104973,.3900019058314284 .08948152382714603,.4543158327229816 .15299429851916642,.4999999999999999 0,.54568416727701795 .15299429851916635,.6099980941685711 .0894815238271459,.6339392013277812 .1766421636210496,.7499999999999997 .066987298107780475,.713066500153052 .2223263308980675,.8005203820042826 .19947961799571722,.7776736691019323 .2869334998469477,.9330127018922192 .2499999999999998,.8233578363789502 .3660607986722184,.910518476172854 .3900019058314283,.8470057014808336 .4543158327229816"/>
    </clipPath>
  </defs>
</svg>
{% endblock %}
